import React, { useState } from "react";
import './switchCities.css'
import { NavBar, Toast } from 'antd-mobile'
import { LeftOutline } from 'antd-mobile-icons'
import { useNavigate } from "react-router-dom";
import axios from "axios";
export default function citySearch() {
    const navigate = useNavigate()
    const [query, setQuery] = useState('')
    const [result, setResult] = useState([])

    const search = async () => {
        let res = await axios.post(`http://localhost:3000/ycf/citySearch?name=${query}`)
        if (res.data.code == 200) {
            setResult(res.data.data)
            console.log(res.data.data)
        }
    }

    return (

        <div className="citySearch-box">
            <div className="citySearch-title">
                <LeftOutline
                    onClick={() => {
                        navigate(-1)
                    }}
                />
                <input type="text"
                    placeholder="请输入城市名称"
                    value={query}
                    style={{ color: "black" }}
                    onChange={(e) => {
                        setQuery(e.target.value)
                    }} />
                <button
                    onClick={() => {
                        search()
                    }}
                >搜索</button>
            </div>
            <div className="citySearch-content">
                {
                    result.map((item, index) => {
                        return <li key={index}>{item.children}</li>
                    })
                }
            </div>
        </div>
    )
}